<template>
  <el-watermark content="肖起昊">
    <div style="height: 700px" />
  </el-watermark>
  <div class="app">
      <router-view></router-view>
      <el-footer class="footer">
        <div class="icon-bar">
          <div :class="{ active: activeKey === item.key }" class="nav-item" v-for="(item, index) in navItems" :key="index" @click="active(item.key)">
            <el-icon class="nav-icon"><component :is="item.icon" /></el-icon>
            <h4 class="nav-text">{{item.text}}</h4>
          </div>
        </div>
        <span class="message-badge"> {{messageCount}} </span>
        <span class="shop-badge"> {{shopcount}} </span>
      </el-footer>
  </div>
</template>

<script setup lang="ts">
import {HomeFilled,Menu,ChatDotRound,ShoppingCart,User} from '@element-plus/icons-vue'
import {ref, watchEffect} from 'vue'
import {useRouter,RouterView,useRoute} from 'vue-router'
import {messageListStore} from "@/store/messageListStore.ts";
import {shopListStore} from "@/store/shopListStore.ts";
let shopList = shopListStore();
let shopcount=ref(shopList.getList().length)
const activeKey = ref('home')
let router = useRouter()
let route=useRoute()
let messageCount=ref(0)
let navItems = [
  { icon: HomeFilled, text: '首页', key: 'home' },
  { icon: Menu, text: '分类', key: 'group' },
  { icon: ChatDotRound, text: '消息', key: 'message' },
  { icon: ShoppingCart, text: '购物车', key: 'shop' },
  { icon: User, text: '个人', key: 'user' }
]//底部导航栏图标列表
let messageList = messageListStore().messageList
watchEffect(() => {
  if(route.name) {
    if(route.name != 'group_t1'&& route.name != 'group_t2'&&route.name != 'other') {
      activeKey.value=route.name.toString()
    }
  }
})//监听路由跳转信息改变导航栏颜色
watchEffect(() => {
  if (messageList){
    messageCount.value=messageList.length
  }
})
watchEffect(() => {
  if(shopList.getList().length){
    shopcount.value=shopList.getList().length
  }
})
function active(home:string) {
  activeKey.value = "null"
  router.push({name:home})
}
</script>

<style scoped>
.shop-badge {
  position: absolute;
  top: 2px;
  right: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17px;
  height: 17px;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  z-index: 1;
}
.message-badge {
  position: absolute;
  top: 2px;
  right: 185px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17px;
  height: 17px;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  z-index: 1;
}
.nav-item.active .nav-icon,
.nav-item.active .nav-text {
  color: #409eff;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 100; /* 确保导航在最上层 */
}

.nav-icon:hover {
  color: #409eff;
}
.icon-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  font-size: 24px;
  margin-bottom: 4px;
  color: #666;
}

.nav-text {
  margin: 0;
  font-size: 12px;
  font-weight: normal;
  color: #666;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.app {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}
</style>